<template>
  <div class="banner">
    <div class="sear" id="boxFixed"><p>亚朵星球</p></div>
    <!-- 轮播图 -->
    <view class="uni-padding-wrap">
      <view class="page-section swiper">
        <view class="page-section-spacing">
          <swiper
            class="swiper"
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
          >
            <swiper-item
              v-for="item in bannerList[0].advertisementData"
              :key="item.id"
              @click="toDetail(item.linkUrl)"
            >
              <view class="swiper-item uni-bg-red">
                <navigator
                  ><img class="imgs" :src="item.image" alt=""
                /></navigator>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    <div class="nav-title">
      <dl
        v-for="item1 in bannerList[1].advertisementData"
        :key="item1.id"
        @click="toDetail(item1.linkUrl)"
      >
        <dt><img :src="item1.image" alt="" /></dt>
        <dd>{{ item1.title }}</dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { getBannerList } from "../server";
export default {
  data() {
    return {
      bannerList: [],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      top:""
    };
  },
  async created() {
    let res = await getBannerList();
    if (res.retcode == 0) {
      this.bannerList = res.result;
      console.log(this.bannerList[0].advertisementData);
    }
  },
  


  methods: {
    toDetail(linkUrl) {
      console.log(linkUrl);
      uni.navigateTo({
        url: linkUrl,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 1200rpx;
  .uni-padding-wrap,
  .page-section,
  .page-section-spacing,
  .swiper,
  .swiper-item,
  .imgs {
    width: 100%;
    height: 1000rpx;
  }
}
.nav-title {
  margin-top: 40rpx;
  width: 100%;
  height: 200rpx;
  display: flex;
  dl {
    width: 13%;
    height: 100%;
    margin-left: 45rpx;
    dt {
      width: 100%;
      height: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    dd {
      font-size: 24rpx;
      text-align: center;
    }
  }
}
.sear {
  width: 100%;
  height: 100rpx;
  position: fixed;
  z-index: 200;
  top: 50rpx;
  left: 30rpx;
  p {
    display: inline-block;
    width: 600rpx;
    height: 80%;
    border-radius: 40rpx;
    background: #eee;
    padding-left: 80rpx;
    line-height: 80rpx;
    color: #999;
    font-size: 36rpx;
  }
}
</style>
